<template>
	<div id="box">
		<el-table
		:data="tableqxData"
		border
		style="width: 100%">
		<el-table-column
		prop="name"
		label="名称"
		>
		</el-table-column>
		<el-table-column
		prop="permission_id"
		label="操作功能"
		>
		</el-table-column>
		<el-table-column
		prop="remark"
		label="备注">
		</el-table-column>
		<el-table-column
		prop="create_by"
		label="创建者">
		</el-table-column>
		<el-table-column label="操作">
		<template slot-scope="scope">
		<el-button
		size="mini"
		:disabled='scope.row.create_by==="系统默认"'
		@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
		<el-button
		size="mini"
		type="danger"
		:disabled='scope.row.create_by==="系统默认"'
		@click="handleDelete(scope.$index, scope.row)">删除</el-button>
		</template>
		</el-table-column>
		</el-table>
			<el-pagination
			background
			:page-size='5'
			@current-change="getpage"
			:current-page='page'
			:hide-on-single-page='true'
			layout="prev, pager, next"
			:total="total">
			</el-pagination>
		<el-drawer
  			:visible.sync="drawer"
  			:direction="direction"
  			:before-close="handleClose"
  			:wrapperClosable='false'
  			size='100%'>
  			<edit :data="editData" @text="close"></edit>
		</el-drawer>
	</div>
</template>
<script>
	import edit from '@/components/houtai/Qxedit'
	import {mapActions,mapState,mapGetters} from 'vuex'
	export default{
		name:'query',
		components:{
			edit
		},
		data(){
			return{
				drawer:false,
				direction:'ttb',
				editData:{},
				zhixiang:{},
				page:1
			}
		},
		computed:{
			...mapState({
				data:state=>state.qxgl.roleData,
				total:state=>state.qxgl.count
			}),
			...mapGetters(['tableqxData']),
		},
		methods:{
			...mapActions(['getqxData','delqx']),
			handleEdit(index,row){
				this.drawer = true
				let obj = {}
				for(let key in row){
					obj[key] = row[key]
					// this.editData[key] = row[key] ??????????????? why
				}
				this.zhixiang = row
				this.editData = obj
			},
			handleDelete(index,row){
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					this.delqx(row.id).then(res=>{
						if(res === '200'){
							if(this.tableqxData.length===1){
								this.page--
								this.getqxData(this.page)
							}else{
								this.getqxData(this.page)
							}
							this.log('删除'+row.name+'权限')
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
						}
					})
					
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
				
			},
			handleClose(done){
				this.$confirm('确定退出前请保存修改？', '确认退出', {
          		distinguishCancelAndClose: true,
          		confirmButtonText: '确定',
          		cancelButtonText: '取消'
        		})
          		.then(() => {
                	done()
              	})
              	.catch(() => {
              	});
			},
			getpage(val){
				this.page = val
				this.getqxData(val)
			},
			close(obj){
				this.drawer = false
				for(let key in obj){
					this.zhixiang[key] = obj[key]
				}

			}
		},
		created(){
			this.getqxData().then(res=>{
				// console.log(res)
				// if(res==='200'){
				// 	this.tableData = this.data
				// }
			})

		}
	}
</script>